<?php 
    $obj=new maps();
    $pid=request('id',false,true);  
      
    $list=$obj->maps_list($pid);    
    $coordstr='';
    $coordfirst='';
    if($list){
    	foreach($list as $val){
    		$coord[]=array('x'=>$val['coord_x'],'y'=>$val['coord_y']);
    	}
    	$coordstr=json_encode($coord);
    	$coordfirst=$list[0]['coord_x'].','.$list[0]['coord_y'];
    }
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>车辆运行轨迹测试</title>
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";font-size:12px;}
table,table tr {
    border-left: 1px solid #cccccc;
	border-top: 1px solid #cccccc;
    width: 100%;
	cursor:pointer;
}
table tr td {
	text-align: center;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    line-height: 30px;
}
.blue{background:#bcd4ec;} 
</style>
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=6URYl63zG23FuMDicG1mhUUG1Gm6pKuC"></script>
<script type="text/javascript">
var le=1;
$(function(){
	$("#datagrid tr:gt(0)").hover(function(){
	    $("#datagrid tr").removeClass("blue");
	    $(this).addClass("blue");		
		window.clearInterval(t1);       
	});
	
    var t1=window.setInterval(refreshCount,500);
})


//循环执行，每隔1秒钟执行一次 1000 
function refreshCount() {	    	
    $("#datagrid tr").removeClass("blue");
    var obj=$("#datagrid tr:eq("+le+")");
    if(obj.length==0){
    	window.clearInterval(t1); 
    	return;
        le=1;
    	obj=$("#datagrid tr:eq("+le+")");
    }
	obj.addClass("blue");
	var cx=obj.attr('cx');
	var cy=obj.attr('cy');
	var ct=obj.attr('ct');
	obj=showpoint(cx,cy,ct);	
	//var height=$("#datagrid tr:eq("+le+")").offset().top;  						   
    le++;    
}	

</script>
</head>

<body>
    <?php if($list){  ?> 
    <div style="width: 910px;margin:auto;margin-top:10px;">
    
        <div style="float:left;">
         
            <div id="allmap"  style="width: 500px; height: 400px;"></div>
         
        </div>    
    
        <div style="float:right;">
            <div style="overflow:scroll;width:395px;height:320px;" id="datalist">
			<table cellspacing="0" id="datagrid" cellpadding="0" border="0" style="margin-top:1px;">
			        <tr>
			          <td>序号</td>			          
			          <td>经度</td>
			          <td>维度</td>
			          <td>时间</td>
			          <td>距离</td>
			        </tr>
			        <?php 
			            if($list){
                         $sum=0;
                         foreach($list as $key=>$val){
			        ?>
		    	    <tr onmouseover="showpoint(<?php echo $val['coord_x'].','.$val['coord_y'].',\''.date('H:i:s',$val['time']).'\'';?>);" cx="<?php echo $val['coord_x'];?>" cy="<?php echo $val['coord_y'];?>" ct="<?php echo date('H:i:s',$val['time']);?>">
		                <td align="left"><?php echo $key+1;?></td>                		                
		                <td align="left"><?php echo $val['coord_x'];?></td>
		                <td align="center"><?php echo $val['coord_y'];?></td>
		                <td align="center"><?php echo date('H:i:s',$val['time']);?></td>                                                                                 
		                <td align="center"><?php $sum+=$val['dis'];echo $val['dis']?>m</td>
		            </tr>
		            <?php 
		               }}
		            ?>
		     </table> 
		     </div>
		     
		     <div>
		         <p>
		                                   总里程 : <?php 
		                    if($sum<1000){
		                    	echo "<b>".$sum."</b>".' 米';
		                    }else{
		                    	echo "<b>".sprintf("%.2f",$sum/1000)."</b>".' 公里';
		                    }
		                 ?>
		         </p>
		         <p style="color:red;">1、在地图上滑动鼠标滚轮，可以放大缩小地图比例<br/>2、鼠标在右侧数据表格上移到，可以查看车辆在地图上的位置</p>
		     </div>       
        
        </div>
    
    </div>
    <?php }else{ ?>
    <br/><br/><br/>
    <center>没有数据</center>
    <?php } ?>
    
</body>
<?php  if($list){ ?>
<script type="text/javascript">
	
	var coordsay=<?php echo $coordstr;?>;
	
	// 百度地图API功能
	var map = new BMap.Map("allmap");    // 创建Map实例
	map.centerAndZoom(new BMap.Point(<?php echo $coordfirst;?>), 18);  // 初始化地图,设置中心点坐标和地图级别
	map.addControl(new BMap.MapTypeControl());   //添加地图类型控件	
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
   
	//绘制坐标轨迹
   var _startX=coordsay[0].x;
   var _startY=coordsay[0].y;
   var _endX=0;
   var _endY=0;
   function goAhead(){              
	  for(i in coordsay){
		  if(i==0)continue;
		  _endX=coordsay[i].x;
		  _endY=coordsay[i].y;
		  drawLine(_startX,_startY,_endX,_endY);
		  
		  _startX=coordsay[i].x;
		  _startY=coordsay[i].y;
	  }
   }    
   goAhead();
   
   /**
    * 划出两个坐标点之间的连线
    * startLong  float  起点坐标经度
    * startLat   float  起点坐标维度
    * endLong    float  终点坐标经度
    * endLong    float  终点坐标维度
    * strokeColor   string  连线颜色  默认值 red
    * strokeWeight  int  连线粗细   默认值 3,越大越粗    
    */
   function drawLine(startLong,startLat,endLong,endLat,strokeColor,strokeWeight,strokeOpacity){
	   strokeColor=strokeColor||'red';
	   strokeWeight=strokeWeight||3;
	   strokeOpacity=strokeOpacity||1;
	   
	   var polyline = new BMap.Polyline([
		                                  new BMap.Point(startLong,startLat),//起始点的经纬度
		                                  new BMap.Point(endLong,endLat)//终止点的经纬度
		                                  ], {strokeColor:strokeColor,//设置颜色 
		                                  strokeWeight:strokeWeight, //宽度
		                                  strokeOpacity:strokeOpacity});//透明度
	   map.addOverlay(polyline);
	   
   }
      
   //显示坐标点在地图上的位置
   var carPoint;
   //坐标点显示的标签
   var carLabel;
   //坐标点图标
   var myIcon = new BMap.Icon("/static/img/kache.png", new BMap.Size(37,25), {imageOffset: new BMap.Size(0, 0)});
   function showpoint(x,y,time){
	   if(carPoint)map.removeOverlay(carPoint);
	   if(carLabel)map.removeOverlay(carLabel);
	   
	   //显示坐标点
	   var point = new BMap.Point(x,y);//起始点的经纬度
	   carPoint = new BMap.Marker(point,{icon:myIcon});
       map.addOverlay(carPoint);   
       
       //显示坐标点信息
       var opts = {
    			  position : point,    // 指定文本标注所在的地理位置
    			  offset   : new BMap.Size(20, -30) //设置文本偏移量
    			}
       carLabel = new BMap.Label("时间:"+time, opts);  // 创建文本标注对象
       carLabel.setStyle({
    					 color : "red",
    					 fontSize : "12px",
    					 height : "20px",
    					 lineHeight : "20px",
    					 fontFamily:"微软雅黑"
    				 });
       map.addOverlay(carLabel);
       
   }
   
</script>
<?php  } ?>
</html>